<template>
    <div class="messagelist">
        <div class="content" v-if="!hasNoMore">
            <!-- 列表 -->
            <div class="list-box" v-for="item in list" :key="item.index">
               <!-- 头像 -->
               <img :src="item.logo" class="logo" alt="">
               <!-- 账号名称 -->
               <div class="name">账号：{{item.user_name}}</div>
               <!-- 操作按钮 -->
               <div class="handle-box">
                   <!-- 编辑 -->
                   <img class="icon" src="http://img.xuannang.net/bianji@2x.png" alt=""  @click="editUser(item)">
                   <!--删除  -->
                   <img class="icon last" src="http://img.xuannang.net/shanchu@2x.png" alt=""  @click="deleteUser(item)">
               </div>
            </div>
        </div>
        <!-- 没有数据 -->
        <div v-else class="no-data">- 暂无数据 -</div>
        <!-- 新增按钮 -->
        <div class="btn" v-show="isShowAdd" @click="addUser">新增子账号</div>
        <!-- loading -->
        <div class="loading-box" v-show="isShowLoading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>

<script>
import { Toast ,Dialog,Loading } from 'vant';
import {getUserList,deleteSubUser} from '@/api/user'
export default {
    name:'subUserList',
    data(){
        return {
            isShowLoading:true,//是否显示；loading
            isShowAdd:true,//是否显示新增，只能新增一个子账号
            token:'',
            userId:0,//用户id
            id:0,//子账号id
            list:[],//留言列表
            pageIndex:1,
            pageSize:10,
            hasNoMore:false,//是否有更多数据
        }
    },
    //声明组件
    components: {
        [Toast.name]: Toast,
        [Loading.name]:Loading,
        [Dialog.name]:Dialog,
    },
    created(){
        if(this.$route.query.token){
            this.token = this.$route.query.token;
        }
        this.getUserList();//获取留言列表
    },
    methods:{
        //获取列表
        getUserList(){
            let token = this.token;//token
            getUserList(token).then(res => {
                if(res.code == 200){
                   if(res.data.length>0){
                     if(res.data.length >= 1){
                         this.isShowAdd = false;
                     }
                     this.list = res.data;   
                   }else{
                     this.hasNoMore = true;
                     this.isShowAdd = true;
                   } 
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                }else{
                    Toast(res.msg);
                   
                }
                this.isShowLoading = false;//隐藏loading
            })
        },
        //编辑用户
        editUser(obj){
            let id = obj.id;//当钱对象id
            let token = this.token;
            let para = {};
            para.title = '编辑子账号',
            para.url = '/editSubUser?token='+token+"&id="+id,
            this.interaction.hLink(para);
        },
        //删除用户
        deleteUser(obj){
            let that = this;
            this.id = obj.id;
            Dialog.confirm({
            title: '',
            message: '确定删除该子账号吗？',
            cancelButtonText:'我再想想',
            }).then(() => {
                // on confirm
                let para = {};
                para.token = that.token;
                para.childUserId = that.id;//子账号id
                // 发送数据请 
                deleteSubUser(para).then(res => {
                if(res.code == 200){
                    Toast(res.msg);
                    // 刷新数据
                    setTimeout(function(){
                        that.getUserList();
                    },2100)
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                }else{
                    Toast(res.msg);
                }
            })
                
            }).catch(() => {
                // on cancel
            });
        },
        // 新增子账号
        addUser(){
            let token = this.token;
            let para = {};
            para.title = '新增子账号',
            para.url = '/addSubUser?token='+token,
            this.interaction.hLink(para);
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .messagelist{
    width :100%;
    min-height :100%;
    background :#f1f1f1;
    .content{
        padding:10px;
        margin-bottom :1.333333rem;
        .list-box {
            padding :.266667rem;
            margin-bottom :.266667rem;
            border-bottom:1px solid #f1f1f1;
            background:#ffffff;
            border-radius:5px;
            height:1.6rem;
            box-sizing :border-box;
            position: relative;
            // 头像
            .logo{
                width:1.066667rem;
                height:1.066667rem;
                border-radius:100%;
                float :left;
            }
            .name {
                font-family:PingFangSC-Medium;
                font-size:.4rem;
                color:#494949;
                letter-spacing:.0056rem;
                line-height :1.066667rem;
                margin-left :.266667rem;
                float :left;
            }
            .handle-box {
               height :26px;
               position :absolute;
               top:50%;
               right :.266667rem;
               margin-top :-13px; 
               float:right;
               .icon{
                    height :26px;
                    width: 26px;
                    margin :0;
                    float: left;
                   &.last{
                       margin-left :.8rem;
                   }
               }
            }
        }
    }
    .no-data{
        padding-top :.8rem;
        text-align :center;
        color :#999;
        font-size :.346667rem;
    }
    .btn{
        opacity:0.9;
        background:#1c90ff;
        box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
        width:100%;
        height:1.2rem;
        line-height :1.2rem;
        text-align :center;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.0056rem;
        position :fixed;
        left :0;
        bottom:0;
        }
}    
</style>